<template>
	<div>
		<Header></Header>
		<el-main>
			<el-row :gutter="20">
				<el-col :span="16">
					<div class="grid-content bg-purple">
						<el-card class="carousel">
							<el-carousel :interval="4000" type="card" height="300px">
								<el-carousel-item>
									<img class="medium" src="../assets/images/1.jpg">
								</el-carousel-item>
								<el-carousel-item>
									<img class="medium" src="../assets/images/2.jpg">
								</el-carousel-item>
								<el-carousel-item>
									<img class="medium" src="../assets/images/3.jpg">
								</el-carousel-item>
								<el-carousel-item>
									<img class="medium" src="../assets/images/4.jpg">
								</el-carousel-item>
							</el-carousel>
						</el-card>
					</div>
				</el-col>

				<el-col :span="8">
					<div class="grid-content bg-purple">
						<el-card class="news-text">
							<div slot="header" class="clearfix">
								<span>2021年11月4日 星期四</span>
								<i class="el-icon-location"></i>
								<span>广州市</span>
								<i class="el-icon-cloudy"></i>
								<span>23℃</span>
							</div>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h2>{{a.id}}{{a.name}}</h2>
									<br>
								</router-link>
							</div>							
						</el-card>
					</div>

				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>	
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<img class="sy" src="../assets/images/s1.jpeg" height="180px">
							<br>
							<p>今年出席系列多边峰会，习近平强调了哪些关键词</p>
							<br>
							<p>贵州武警开展交通工具反劫持演练</p>
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card><img class="sy" src="../assets/images/s2.jpg" height="180px">
						<br>
							<p>习近平出席亚太经合组织工商领导人峰会并发表主旨演讲</p>
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card><img class="sy" src="../assets/images/s3.jpg" height="180px">
						<br>
							<p>吸入式疫苗亮相！“宝宝”再也不怕被扎针了</p>
							<br>
							<p>今年出席系列多边峰会，习近平强调了哪些关键词</p>
							<br>
							<p>贵州武警开展交通工具反劫持演练</p>
						</el-card>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>	
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<img class="sy" src="../assets/images/s4.jpg" height="180px" width="300px">
							<br>
							<p>贵州武警开展交通工具反劫持演练</p>
							
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card><img class="sy" src="../assets/images/s5.jpeg" height="180px" width="300px">
						<br>
							<p>外逃20年，许国俊，被遣返回国！</p>
							<br>
							<p>贵州武警开展交通工具反劫持演练</p>
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<img class="sy" src="../assets/images/s6.png" height="180px" width="300px">
						<br>
							<p>马龙0-4惨败！决赛不敌樊振东被横扫</p>
						<br>
							<p>外逃20年，许国俊，被遣返回国！</p>
						</el-card>
					</div>
				</el-col>
			</el-row>


			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple-dark">
						<h1 class="h1-height">要闻</h1>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>	
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>	
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>	
						</el-card>
					</div>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple-dark">
						<h1 class="h1-height">生态环境</h1>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>	
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>	
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="a in b">
								<router-link style="color: black;" to="/">
									<h4>{{a.id}}{{a.name}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
			</el-row>

			<div class="block">
				<el-timeline>

					<el-timeline-item :timestamp="news.created" placement="top" v-for="news in newss">
						<el-card>
							<h4>
								<router-link style="color: black;" :to="{name: 'newsdetail', params: {newsId: news.id}}">
									{{news.title}}
								</router-link>
							</h4>
							<p>{{news.description}}</p>
						</el-card>
					</el-timeline-item>

				</el-timeline>

				<el-pagination class="mpage" background layout="prev, pager, next" :current-page="currentPage"
					:page-size="pageSize" :total="total" @current-change=page>
				</el-pagination>
			</div>

			<Footer></Footer>
		</el-main>
	</div>
</template>

<script>
	import Header from "@/components/Header"
	import Footer from "@/components/Footer"

	export default {
		name: 'news',
		components: {
			Header,
			Footer
		},
		data() {
			return {
				newss: {},
				currentPage: 1,
				total: 0,
				pageSize: 5,

				b: [{
						id: 1,
						name: '. 日媒：岸田文雄任命林芳正为日本新外相'
					},
					{
						id: 2,
						name: '. 欧盟向白俄提供经济以解决难民流入问题'
					},
					{
						id: 3,
						name: '. 美刊：美专家向美军推销“双舰队模式 '
					},
					{
						id: 4,
						name: '. 外媒关注：武汉将举办湿地公约大会 '
					},
					{
						id: 5,
						name: '. 欧盟因难民危机严重分裂 '
					},
					{
						id: 6,
						name: '.拓宽环境污染问题发现渠道 '
					},
					{
						id: 7,
						name: '.气候变化格拉斯哥大会顺利闭幕 '
					},
				]


				//isCollapse: true
			}

		},
		methods: {
			page(currentPage) {
				const _this = this
				_this.$axios.get("/news?currentPage=" + currentPage).then(res => {
					console.log(res)
					_this.newss = res.data.data.records
					_this.currentPage = res.data.data.current
					_this.total = res.data.data.total
					_this.pageSize = res.data.data.size

				})
			}
		},
		created() {
			this.page(1)
		}
	}
</script>

<style scoped>
	/* 轮播图 */
	/* 卡片 */
	.carousel {
		width: auto;
		height: 360px;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 15px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}

	/* 日期天气 */
	.news-text {
		margin-top: 0px;
		font-size: 12px;
		min-height: 50px;
		width: auto;
	}

	/* 新闻 */
	.news {
		/* 不换行*/
		white-space: nowrap;
		/* 超出文本隐藏*/
		overflow: hidden;
	}

	.h1-height {
		background-color: #efefef;
		color: #555500;
		text-indent: 1em;
		border-left: #ffd04b 3px solid;
		line-height: 50px;
	}

	.mpage {
		margin: 0 auto;
		text-align: center;
	}
</style>
